<template>
  <div class="app-container">
    <el-card>
      <div slot="header" class="clearfix">
        <span>供货协议详情 - {{ data.frameworkCode || '-' }}</span>
        <el-tag class="ml10" :type="statusTagType(data.status)">{{ statusLabel(data.status) }}</el-tag>
      </div>

      <!-- 协议基础 -->
      <div class="panel-title">协议基础</div>
      <el-row :gutter="20">
        <el-col :span="12"><div class="item"><b>收货公司：</b>{{ data.receiverCompanyName }}</div></el-col>
        <el-col :span="12"><div class="item"><b>发货公司：</b>{{ data.senderCompanyName }}</div></el-col>
        <el-col :span="12"><div class="item"><b>需求计划部门：</b>{{ data.receiverDeptName }}</div></el-col>
        <el-col :span="12"><div class="item"><b>发货计划部门：</b>{{ data.senderDeptName }}</div></el-col>
        <el-col :span="12"><div class="item"><b>收货仓库：</b>{{ data.receiverWarehouseName }}</div></el-col>
        <el-col :span="12"><div class="item"><b>发货仓库：</b>{{ data.senderWarehouseName }}</div></el-col>
        <el-col :span="12"><div class="item"><b>收货联系人：</b>{{ data.receiverContact }}</div></el-col>
        <el-col :span="12"><div class="item"><b>收货电话：</b>{{ data.receiverPhone }}</div></el-col>
        <el-col :span="12"><div class="item"><b>发货联系人：</b>{{ data.senderContact }}</div></el-col>
        <el-col :span="12"><div class="item"><b>发货电话：</b>{{ data.senderPhone }}</div></el-col>
      </el-row>

      <!-- 业务配置 -->
      <div class="panel-title">业务配置</div>
      <el-row :gutter="20">
        <el-col :span="12"><div class="item"><b>要货提前期：</b>{{ data.leadTimeHours }} 小时</div></el-col>
        <el-col :span="12"><div class="item"><b>打印机ID：</b>{{ data.printerId }}</div></el-col>
        <el-col :span="12"><div class="item"><b>箱标模板：</b>{{ data.boxLabelTemplate }}</div></el-col>
        <el-col :span="12"><div class="item"><b>看板模板：</b>{{ data.kanbanTemplate }}</div></el-col>
        <el-col :span="12"><div class="item"><b>需确认协议：</b>{{ yesNo(data.needSenderConfirmFramework) }}</div></el-col>
        <el-col :span="12"><div class="item"><b>需确认看板：</b>{{ yesNo(data.needSenderConfirmKanban) }}</div></el-col>
        <el-col :span="12"><div class="item"><b>当做送货单：</b>{{ yesNo(data.deliveryAsReceipt) }}</div></el-col>
        <el-col :span="12"><div class="item"><b>收货扫码要求：</b>{{ scanLabel(data.scanRequirement) }}</div></el-col>
      </el-row>

      <!-- 时间信息 -->
      <div class="panel-title">时间信息</div>
      <el-row :gutter="20">
        <el-col :span="12"><div class="item"><b>生效时间：</b>{{ data.businessStartDate }}</div></el-col>
        <el-col :span="12"><div class="item"><b>到期时间：</b>{{ data.businessEndDate }}</div></el-col>
      </el-row>

      <!-- 操作记录 -->
      <div class="panel-title">操作记录</div>
      <el-row :gutter="20">
        <el-col :span="12"><div class="item"><b>创建人：</b>{{ data.createBy }}</div></el-col>
        <el-col :span="12"><div class="item"><b>创建时间：</b>{{ data.createTime }}</div></el-col>
        <el-col :span="12"><div class="item"><b>更新人：</b>{{ data.updateBy }}</div></el-col>
        <el-col :span="12"><div class="item"><b>更新时间：</b>{{ data.updateTime }}</div></el-col>
        <el-col :span="24" v-if="data.remark"><div class="item"><b>备注：</b>{{ data.remark }}</div></el-col>
      </el-row>

      <div class="mt20">
        <el-button @click="$router.back()">返回</el-button>
        <el-button type="primary" @click="gotoEdit" v-hasPermi="['kanban:framework:edit']">编辑</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getSupplyFramework } from '@/api/kanban/supplyFramework'

export default {
  name: 'SupplyFrameworkDetail',
  data() {
    return {
      data: {}
    }
  },
  created() {
    const id = this.$route.query.id
    if (id) {
      getSupplyFramework(id).then(res => {
        this.data = res.data || {}
      })
    }
  },
  methods: {
    statusLabel(s) {
      const m = { 10: '草稿', 20: '待确认', 30: '生效', '-20': '已过期', '-10': '已作废' }
      return m[s] || s
    },
    statusTagType(s) {
      switch (s) {
        case 10: return 'info'
        case 20: return 'warning'
        case 30: return 'success'
        case -20: return ''
        case -10: return 'danger'
        default: return ''
      }
    },
    yesNo(v) { return v === 1 ? '是' : '否' },
    scanLabel(v) { return v === 1 ? '必须扫码' : v === 2 ? '建议扫码' : '不要求' },
    gotoEdit() {
      this.$router.push({ path: '/kanban/supplyFramework/edit', query: { id: this.data.id } })
    }
  }
}
</script>

<style scoped>
.panel-title {
  font-size: 15px;
  color: #6379bb;
  border-bottom: 1px solid #ddd;
  margin: 8px 10px 15px 10px;
}
.item { margin: 6px 0; }
.ml10 { margin-left: 10px; }
.mt20 { margin-top: 20px; }
</style>